<!doctype html>
<html lang="zh-CN">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
		<meta name="description" content="">
		<meta name="author" content="">
		<link rel="icon" href="https://cdn.jsdelivr.net/npm/@bootcss/v3.bootcss.com@1.0.14/favicon.ico">
		<link rel="canonical" href="https://getbootstrap.com/docs/3.4/examples/dashboard/">

		<title>在线书城后台管理系统</title>

		<!-- Bootstrap core CSS -->
		<link href="https://cdn.jsdelivr.net/npm/@bootcss/v3.bootcss.com@1.0.14/dist/css/bootstrap.min.css" rel="stylesheet">

		<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
		<link href="https://cdn.jsdelivr.net/npm/@bootcss/v3.bootcss.com@1.0.14/assets/css/ie10-viewport-bug-workaround.css"
		 rel="stylesheet">

		<!-- Custom styles for this template -->
		<link href="https://cdn.jsdelivr.net/npm/@bootcss/v3.bootcss.com@1.0.14/examples/dashboard/dashboard.css" rel="stylesheet">

		<!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
		<!--[if lt IE 9]><script src="https://cdn.jsdelivr.net/npm/@bootcss/v3.bootcss.com@1.0.14/assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
		<script src="https://cdn.jsdelivr.net/npm/@bootcss/v3.bootcss.com@1.0.14/assets/js/ie-emulation-modes-warning.js"></script>

		<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
		<!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
	</head>

	<body>

		<nav class="navbar navbar-inverse navbar-fixed-top">
			<div class="container-fluid">
				<div class="navbar-header">
					<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false"
					 aria-controls="navbar">
						<span class="sr-only">Toggle navigation</span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
					</button>
					<a class="navbar-brand" href="#">在线书城后台管理系统</a>
				</div>
				<div id="navbar" class="navbar-collapse collapse">
					<ul class="nav navbar-nav navbar-right">
						<li><a href="#">设置</a></li>
						<li><a href="#">退出</a></li>
					</ul>
					<form class="navbar-form navbar-right">
						<input type="text" class="form-control" placeholder="搜索">
					</form>
				</div>
			</div>
		</nav>

		<div class="container-fluid">
			<div class="row">
				<div class="col-sm-3 col-md-2 sidebar">
					<ul class="nav nav-sidebar">
						<li><a href="index.jsp">总览 <span class="sr-only">(current)</span></a></li>
						<li class="active"><a href="product_list.jsp">商品管理</a></li>
						<li><a href="#">订单管理</a></li>
						<li><a href="#">用户管理</a></li>
					</ul>
				</div>
				<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">


					<h2 class="sub-header">商品列表</h2>
					<!-- 绑定模态框按钮 -->
					<button class="btn btn-primary" data-toggle="modal" data-target="#productModal">添加商品</button>
					<div class="table-responsive">
						<table class="table table-striped">
							<thead>
								<tr>
									<th>商品ID</th>
									<th>商品名称</th>
									<th>商品价格</th>
									<th>商品分类</th>
									<th>商品数量</th>
									<th>商品图片</th>
									<th>商品描述</th>
									<th>操作</th>
								</tr>
							</thead>
							<tbody>
								<tr>
									<td>1</td>
									<td>大勇和小花</td>
									<td>10.00</td>
									<td>文学</td>
									<td>100</td>
									<td>
										<img src="../productImg/dayongxiaohua.jpg" style="width: 100px; height: 100px;" alt="..." class="img-thumbnail">
									</td>
									<td>这是一本文学小说。</td>
									<td>
										<button class="btn btn-info" data-toggle="modal" data-target="#productModal">修改</button>
										<button class="btn btn-danger">删除</button>
									</td>
								</tr>
								<tr>
									<td>1</td>
									<td>大勇和小花</td>
									<td>10.00</td>
									<td>文学</td>
									<td>100</td>
									<td>
										<img src="../productImg/dayongxiaohua.jpg" style="width: 100px; height: 100px;" alt="..." class="img-thumbnail">
									</td>
									<td>这是一本文学小说。</td>
									<td>
										<button class="btn btn-info" data-toggle="modal" data-target="#productModal">修改</button>
										<button class="btn btn-danger">删除</button>
									</td>
								</tr>
								<tr>
									<td>1</td>
									<td>大勇和小花</td>
									<td>10.00</td>
									<td>文学</td>
									<td>100</td>
									<td>
										<img src="../productImg/dayongxiaohua.jpg" style="width: 100px; height: 100px;" alt="..." class="img-thumbnail">
									</td>
									<td>这是一本文学小说。</td>
									<td>
										<button class="btn btn-info" data-toggle="modal" data-target="#productModal">修改</button>
										<button class="btn btn-danger">删除</button>
									</td>
								</tr>
							</tbody>
						</table>
					</div>
				</div>
			</div>
		</div>

		<!-- 商品模态框部分 -->
		<!-- Modal -->
		<div class="modal fade" id="productModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
			<div class="modal-dialog" role="document">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
						<h4 class="modal-title" id="myModalLabel">商品添加</h4>
					</div>
					<div class="modal-body">
						<div class="row">
							<div class="col-md-1"></div>
							<div class="col-md-10">
								<form class="form-horizontal">
									<div class="form-group">
										<label for="productName1" class="col-sm-3 control-label">商品名称</label>
										<div class="col-sm-9">
											<input type="text" class="form-control" id="productName1" placeholder="商品名称">
										</div>
									</div>
									<div class="form-group">
										<label for="productName2" class="col-sm-3 control-label">商品价格</label>
										<div class="col-sm-9">
											<input type="text" class="form-control" id="productName2" placeholder="商品价格">
										</div>
									</div>
									<div class="form-group">
										<label for="productName3" class="col-sm-3 control-label">商品分类</label>
										<div class="col-sm-9">
											<input type="text" class="form-control" id="productName3" placeholder="商品分类">
										</div>
									</div>
									<div class="form-group">
										<label for="productName4" class="col-sm-3 control-label">商品数量</label>
										<div class="col-sm-9">
											<input type="text" class="form-control" id="productName4" placeholder="商品数量">
										</div>
									</div>
									<div class="form-group">
										<label for="productName5" class="col-sm-3 control-label">商品图片</label>
										<div class="col-sm-9">
											<input type="file" class="form-control" id="productName5" placeholder="请上传商品图片">
										</div>
									</div>
									<div class="form-group">
										<label for="productName6" class="col-sm-3 control-label">商品描述</label>
										<div class="col-sm-9">
											<textarea class="form-control" id="productName6" placeholder="商品描述"></textarea>
										</div>
									</div>
								</form>
							</div>
							<div class="col-md-1"></div>
						</div>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
						<button type="button" class="btn btn-primary">保存</button>
					</div>
				</div>
			</div>
		</div>

		<!-- Bootstrap core JavaScript
    ================================================== -->
		<!-- Placed at the end of the document so the pages load faster -->
		<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ"
		 crossorigin="anonymous"></script>
		<script>
			window.jQuery || document.write(
				'<script src="https://cdn.jsdelivr.net/npm/@bootcss/v3.bootcss.com@1.0.14/assets/js/vendor/jquery.min.js"><\/script>'
			)
		</script>
		<script src="https://cdn.jsdelivr.net/npm/@bootcss/v3.bootcss.com@1.0.14/dist/js/bootstrap.min.js"></script>
		<!-- Just to make our placeholder images work. Don't actually copy the next line! -->
		<script src="https://cdn.jsdelivr.net/npm/@bootcss/v3.bootcss.com@1.0.14/assets/js/vendor/holder.min.js"></script>
		<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
		<script type="text/javascript">
			$("#btn-primary").click(function () {

			})
		</script>
	</body>
</html>
